@import (reference) "../_mixins-wln.less";

/*none animate*/
.none-leave-active, .none-enter-active {
  transition: none;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.25s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

/*slide-left slide-right*/
.slide-left-enter, .slide-right-leave-active {
  opacity: 0;
  transform: translate(10px, 0);
}

.slide-left-leave-active, .slide-right-enter {
  opacity: 0;
  transform: translate(-10px, 0);
}

/*slide-down slide-up*/
.slide-down-enter, .slide-up-leave-active {
  opacity: 0;
  transform: translateY(-30%);
}

/*fade-in-up fade-in-down*/
.fade-in-down-enter-active,
.fade-in-down-leave-active,
.fade-in-up-enter-active,
.fade-in-up-leave-active{
  transition:transform 0.25s, opacity 0.25s;
}
.fade-in-up-enter,.fade-in-up-leave-to {
  opacity: 0;
  -webkit-transform: translateZ(0);
  transform: translateY(30px);
}

.fade-in-down-enter,.fade-in-down-leave-to {
  opacity: 0;
  -webkit-transform: translateZ(0);
  transform: translateY(-30px);
}

/*slide-in-down*/
.slide-in-down-enter, .slide-in-down-leave-to {
  opacity: 0;
  -webkit-transform: translateZ(0);
  transform: translateY(-800px); // 目前最大屏幕高度
}
.slide-in-down-enter-active, .slide-in-down-leave-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/*slide-in-up*/
.slide-in-up-enter, .slide-in-up-leave-to {
  opacity: 0;
  -webkit-transform: translateZ(0);
  transform: translateY(800px); // 目前最大屏幕高度
}
.slide-in-up-enter-active, .slide-in-up-leave-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/*rotateY*/
.rotateY-enter, .rotateY-leave-active {
  transform: perspective(500px) rotate3d(0, 1, 0, -90deg);
}

.rotateY-leave-active, .rotateY-enter {
  transform: perspective(-500px) rotate3d(0, 1, 0, 90deg);
}

@duration: 0.3s;
.flipY-right-enter-active {
  animation: flipInY @duration;
}

.flipY-right-leave-active {
  animation: flipOutY @duration reverse;
}

.flipY-left-enter-active {
  animation: flipOutY @duration;
}

.flipY-left-leave-active {
  animation: flipInY @duration reverse;
}

@perspective: 300vw;
@keyframes flipInY {
  from {
    transform: perspective(@perspective) rotate3d(0, 1, 0, 90deg);
    animation-timing-function: ease;
  }
  to {
    transform: perspective(@perspective);
  }
}

@keyframes flipOutY {
  from {
    transform: perspective(@perspective) rotate3d(0, 1, 0, -90deg);
    animation-timing-function: ease;
  }
  to {
    transform: perspective(@perspective);
  }
}


.spin {
  animation: spin 3s infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg)
  }
}
